<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<meta name="description" content="">
		<meta name="author" content="">
		<title>Signin Template for Bootstrap</title>
		<!-- Bootstrap core CSS -->
		<link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
		<!-- Custom styles for this template -->
		<link th:href="@{/css/signin.css}" rel="stylesheet">
		<script src="http://cdn.bootcss.com/blueimp-md5/1.1.0/js/md5.js"></script>


	</head>

	<body class="text-center">
		<form class="form-signin" th:action="@{/user/login}" method="post">
			<img class="mb-4" th:src="@{/img/bootstrap-solid.svg}" alt="" width="72" height="72">
			<h1 class="h3 mb-3 font-weight-normal" th:text="#{login.tip}">Please sign in</h1>

			<!--显示登录消息，如果用户密码错误，则提示信息-->
			<p style="color: red" th:text="${msg}" th:if="${not #strings.isEmpty(msg)}"></p>


			<input type="text" id="username" name ="username" class="form-control" th:placeholder="#{login.username}" required="" autofocus="">
			<input type="password" id="password" name="password" class="form-control" th:placeholder="#{login.password}" required="">
			<input type="hidden" id="md5_password" name="md5_password" >
			<div class="checkbox mb-3">
				<label>
          <input type="checkbox" value="remember-me"> [[#{login.remember}]]
        </label>
			</div>
			<button class="btn btn-lg btn-primary btn-block" type="submit" onclick="pass()">[[#{login.btn}]]</button>
			<button class="btn btn-lg btn-primary btn-block" th:action="@{/user/register}">[[#{login.register}]]</button>
			<p class="mt-5 mb-3 text-muted">© 2021-2022</p>
			<a class="btn btn-sm" th:href="@{/index.html(l='zh_CN')}">中文</a>
			<a class="btn btn-sm" th:href="@{/index.html(l='en_US')}">English</a>
		</form>


		<script>
			function pass(){
				let pwd = document.getElementById('password') // 获取 password 的属性值
				let md5pwd = document.getElementById('md5_password') // 获取 md5_password 的属性值
				// MD5加密
				md5pwd.value = md5(pwd.value,huahua) // 修改 md5pwd 的属性值就是修改 md5_password的属性值,另外，huahua表示加盐（salt）
			}
		</script>

		<!-- Bootstrap core JavaScript
        ================================================== -->
		<!-- Placed at the end of the document so the pages load faster -->
		<script type="text/javascript" th:src="@{/js/jquery-3.2.1.slim.min.js}" ></script>
		<!--导入本地的md5jar包，但是在 head 已经导入网络版的了，所有暂时用不到-->
		<script type="text/javascript" th:src="@{/js/jquery.md5.js}" ></script>


	</body>

</html>